<template>
  <el-dialog
    title="合同列表"
    v-model="dialogVisible"
    width="1200px"
    :before-close="handleClose"
    class="customer-list-dialog"
    @close="handleClose"
    append-to-body
  >

      <!-- Filter Section -->
      <div class="filter-section">
        <div class="left-filters">
          <el-input
            @clear="clear('supplier')"
            @click="showCustomer"
            style="width: 240px"
            v-model="queryParams.supplierName"
            placeholder="关联客户"
            size="normal"
            clearable
            suffix-icon="ArrowDown"
          ></el-input>
          <el-input
            @clear="clear('clue')"
            @click="showClue"
            style="width: 240px"
            v-model="queryParams.clueName"
            placeholder="关联商机"
            size="normal"
            clearable
            suffix-icon="ArrowDown"
          ></el-input>

          <el-select style="width: 240px" @change="getList" :disabled="isLink" v-model="queryParams.signUserId" clearable reserve-keyword placeholder="请选择签订人">
            <el-option v-for="item in assistList" :key="item.userId" :label="item.realityName" :value="item.userId">
              <span style="float: left">{{ item.realityName }}</span>
              <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
                {{ item.userName }}
              </span>
            </el-option>
          </el-select>
          
      <el-input  v-model="queryParams.supplierName" style="max-width: 240px" placeholder="请输入合同编号" class="input-with-select" clearable>
        <template #append>
          <el-button @click="handleQuery" type="primary"
            ><el-icon><Search /></el-icon
          ></el-button>
        </template>
      </el-input>
        </div>
      </div>
    <el-table
      v-loading="loading"
      @row-dblclick="dbclick"
      @selection-change="handleSelectionChange"
      :data="dataSource"
      style="width: 100%"
      scrollbar-always-on
      show-summary
    >
      <el-table-column type="selection" width="80" align="center" :selectable="selectHandle" />
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column label="合同编号" align="left" prop="contractNumber" min-width="100" />
      <el-table-column label="合同名称" align="left" prop="contractName" min-width="200" />   
      <el-table-column prop="signDate" label="签订日期" min-width="120">
          <template #default="scope">
           <span>{{scope.row.signDate ? moment(scope.row.signDate).format('YYYY-MM-DD') : '-'}}</span>
          </template>
        </el-table-column>
      <el-table-column label="关联客户" align="center" prop="supplierName" />
      <el-table-column label="合同金额" align="center" prop="contractPaymentAmount" />
      <el-table-column label="已回款金额" align="center" prop="paymentAmount" />
      <el-table-column label="应收金额" align="center" prop="unPaymentAmount" />
      <!-- <el-table-column prop="remark" label="备注"></el-table-column> -->
    </el-table>
    
    <customDialog ref="customDialog" @ok="customerOk"></customDialog>
    <selectClueForm ref="selectClueForm" @ok="clueOk"></selectClueForm>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
    
    <script>
import listMixin from '@/mixins/listMixin';
import customDialog from '@/views/goods/customer/modules/custom-dialog.vue';
import selectClueForm from '@/views/goods/clue/modules/clue-dialog.vue';
export default {
  name: 'CustomerListModal',
  mixins: [listMixin],
  components: { customDialog,selectClueForm },
  data() {
    return {
      urls: {
        list: '/order/contract/list',
        delete: '/order/contract'
      },
      dialogVisible: false,
      customerName: '',
      manager: '',
      currentPage: 1,
      total: 1,
      customerOptions: [],
      managerOptions: [],
      price_level: [],
      showTree: true
    };
  },
  methods: {
    showCustomer() {
      this.$refs.customDialog.open();
    },
    showClue() {
      this.$refs.selectClueForm.open();
    },
    clueOk(rows) {
      let clue = rows[0];

      this.queryParams.clueName = clue.clueName;
      this.queryParams.clueId = clue.id;
      this.getList();
    },
    customerOk(rows) {
      let customer = rows[0];
      this.queryParams.supplierId = customer.id;
      this.queryParams.supplierName = customer.supplierName;
      this.getList();
    },
    handleRowClick(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    handleClose() {
      this.dialogVisible = false;
      this.$emit('close');
    },
    open() {
      this.dialogVisible = true;
    },
    handleConfirm() {
      if (this.selectedRows.length === 0) return this.$modal.msgError('请选择选择一条合同记录');
      this.$emit('ok', this.selectedRows);
      this.handleClose();
    },
    handleCreate() {
      // Handle create new customer logic
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>
    
    <style lang="scss" scoped>
.customer-list-dialog {
  /* Add any custom styles here */
}

.filter-section {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.text-right {
  text-align: right;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.el-select {
  width: 100%;
}

/* Override element-plus styles if needed */
:deep(.el-dialog__body) {
  padding: 20px;
}
</style>